/* 增加一些基本的重置样式 */
body,
h1,
p,
div {
  margin: 0; /* 移除元素的默认外边距 */
  padding: 0; /* 移除元素的默认内边距 */
}

/* 自定义h1样式 */
.h1 {
  display: block; /* 将元素显示为块级元素 */
  font-size: 2em; /* 字体大小设置为当前字体大小的2倍 */
  margin-block-start: 0.67em; /* 设置块级元素顶部的外边距 */
  margin-block-end: 0.67em; /* 设置块级元素底部的外边距 */
  margin-inline-start: 0px; /* 设置行内元素开始的外边距 */
  margin-inline-end: 0px; /* 设置行内元素结束的外边距 */
  font-weight: bold; /* 字体加粗 */
  font-size: 1px; /* 字体大小设置为1px，这可能是一个错误，通常h1的字体大小会更大 */
}
h1 {
  font-size: 44px; /* 设置h1标签的字体大小为44px */
}

/* 为容器添加一些边距和内边距 */
.container {
  max-width: 1200px; /* 设置容器的最大宽度为1200px */
  margin: auto; /* 容器自动居中显示 */
  padding: 20px; /* 设置容器的内边距为20px */
}

/* 头部样式 */
.header {
  width: 2000px; /* 设置头部的宽度为2000px */
  background: #6bb7d8; /* 设置头部的背景颜色为浅蓝色 */
  color: white; /* 设置文字颜色为白色 */
  padding: 10px 0; /* 设置头部的上下内边距为10px，左右内边距为0 */
  text-align: center; /* 文字居中显示 */
  font-size: 12px; /* 设置字体大小为12px */
}

/* 导航链接样式 */
.header a {
  color: white; /* 设置链接文字颜色为白色 */
  text-decoration: none; /* 去除链接的下划线 */
}

/* 主要内容区域样式 */
main {
  padding: 20px; /* 设置主要内容区域的内边距为20px */
}

/* 列表样式 */
.list {
  margin-bottom: 20px; /* 设置列表底部的外边距为20px */
  text-align: center; /* 文字居中显示 */
}

/* 轮播图样式 */
.swiper {
  width: 100%; /* 设置轮播图宽度为100% */
  max-width: 1200px; /* 设置轮播图最大宽度为1200px */
  height: 800px; /* 设置轮播图高度为800px */
  margin: 20px auto; /* 设置轮播图上下外边距为20px，左右自动居中 */
}

.swiper-slide {
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 子元素水平居中 */
  align-items: center; /* 子元素垂直居中 */
  height: 80%; /* 设置轮播图容器的高度为80% */
}

/* 轮播图图片样式 */
.swiper-slide img {
  width: 100%; /* 设置图片宽度为100% */
  height: 100%; /* 设置图片高度为100% */
  /* object-fit: cover; 注释掉的属性，如果取消注释，图片会覆盖整个容器，保持宽高比 */
}

/* 分页器、导航按钮和滚动条的样式 */
.swiper-button-prev,
.swiper-button-next {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 向上移动50%，实现垂直居中 */
  z-index: 10; /* 确保箭头在图片之上 */
}

.swiper-button-prev {
  left: 10px; /* 设置导航按钮前一个的位置距离左边10px */
}

.swiper-button-next {
  right: 10px; /* 设置导航按钮后一个的位置距离右边10px */
}

main > div {
  font-size: 50px; /* 设置主要内容区域中div标签的字体大小为50px */
}

/* 激活状态样式 */
.active {
  display: block; /* 元素显示为块级元素 */
}

/* 非激活状态样式 */
.off {
  display: none; /* 元素不显示 */
}